@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 14pt;
  line-height: 130%;
  color: #2c3e50;
  overflow-y: hidden;
}

#root {
  width: 100%;
  height: 100%;
}

@layer base {
  :root {
    --background: 220 23.076923191547394% 94.90196108818054%; /* base */
    --foreground: 234 16.022099554538727% 35.49019694328308%; /* text */

    --muted: 223 15.909090638160706% 82.74509906768799%; /* surface0 */
    --muted-foreground: 233 12.796208262443542% 41.372549533843994%; /* subtext1 */

    --popover: 220 23.076923191547394% 94.90196108818054%; /* base */
    --popover-foreground: 234 16.022099554538727% 35.49019694328308%; /* text */

    --card: 220 23.076923191547394% 94.90196108818054%; /* base */
    --card-foreground: 234 16.022099554538727% 35.49019694328308%; /* text */

    --border: 225 13.55932205915451% 76.86274647712708%; /* surface1 */
    --input: 225 13.55932205915451% 76.86274647712708%; /* surface1 */

    --primary: 109 57.63546824455261% 39.803922176361084%; /* accent - Green */
    --primary-foreground: 220 23.076923191547394% 94.90196108818054%; /* base */

    --secondary: 223 15.909090638160706% 82.74509906768799%; /* surface0 */
    --secondary-foreground: 234 16.022099554538727% 35.49019694328308%; /* text */

    --accent: 223 15.909090638160706% 82.74509906768799%; /* surface0 */
    --accent-foreground: 234 16.022099554538727% 35.49019694328308%; /* text */

    --destructive: 347 86.66666746139526% 44.11764740943909%; /* red */
    --destructive-foreground: 220 21.95121943950653% 91.96078181266785%; /* mantle */

    --ring: 234 16.022099554538727% 35.49019694328308%; /* text */

    --radius: 0.5rem;

    --chart-1: 347 86.66666746139526% 44.11764740943909%; /* red */
    --chart-2: 183 73.86363744735718% 34.50980484485626%; /* teal */
    --chart-3: 220 91.4893627166748% 53.921568393707275%; /* blue */
    --chart-4: 35 76.98412537574768% 49.41176474094391%; /* yellow */
    --chart-5: 109 57.63546824455261% 39.803922176361084%; /* green */
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
